<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			根计数器{{count}}
			<parent const="1" msg="hello vue"></parent>
		</div>
	</body>
</html>
<script>
	const parent={
		// props:['count'],
		props:{
			count:{
				require:true,
				validater:function(val){
					return val >10
				},
				default:1,
				type:Number
			}
		},
		mounted(){
			console.log(this.$attrs)
		},
		template:`
			<div v-bind="this.$attrs">父计数器1</div>
			<div :msg="this.$attrs.msg">父计数器2</div>
			`
	}
	const app=Vue.createApp({
		components:{
			parent
		},
		data() {
			return{
				count:1
			}
		}
	})
	app.mount('#app')
</script>